<script>
import {useSiteDataApi} from "@/api/homePage";
import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";

export default {
  name: "list",
  components: {
    HzSafeArea
  },
  data(){
    return {
      scenicSpotList: [],
      isLoading: true,
      isRefreshing: false
    }
  },
  onLoad() {
    this.init()
  },
  onPullDownRefresh() {
    this.isRefreshing = true;
    this.init();
  },
  // 页面配置
  onReady() {
    uni.setNavigationBarTitle({
      title: '景区列表'
    });
  },
  // 设置页面的原生配置
  config: {
    navigationBarTitleText: '景区列表',
    enablePullDownRefresh: true,
    backgroundColor: '#F5F7FA'
  },
  // 页面配置 (app.json)
  // #ifdef MP
  navigationBarTitleText: '景区列表',
  enablePullDownRefresh: true,
  backgroundColor: '#F5F7FA',
  // #endif
  methods:{
    init(){
      if (!this.isRefreshing) {
        uni.showLoading({
          title: '加载中...',
          mask: true
        });
      }
      
      useSiteDataApi(3606).then(res => {
        this.scenicSpotList = res.Data;
        this.isLoading = false;
        this.isRefreshing = false;
        uni.hideLoading();
        uni.stopPullDownRefresh();
      }).catch(err => {
        this.isLoading = false;
        this.isRefreshing = false;
        uni.hideLoading();
        uni.stopPullDownRefresh();
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      })
    },
    
    // 点击景区卡片
    goToDetail(item) {
      uni.navigateTo({
        url: `/scenicSpot_subpages/scenic/details?id=${item.Id}`
      });
    }
  }
}
</script>

<template>
  <view class="container">
    <!-- <view class="header">
      <view class="title">景区列表</view>
      <view class="subtitle">精选知名景点</view>
    </view> -->
    
    <!-- 骨架屏加载效果 -->
    <view class="skeleton-list" v-if="isLoading">
      <view class="skeleton-card" v-for="i in 4" :key="i">
        <view class="skeleton-image"></view>
        <view class="skeleton-info">
          <view class="skeleton-name"></view>
          <view class="skeleton-sort"></view>
        </view>
      </view>
    </view>
    
    <!-- 景区列表 -->
    <view class="spot-list" v-if="!isLoading && scenicSpotList.length > 0">
      <view 
        v-for="(item, index) in scenicSpotList" 
        :key="item.Id" 
        class="spot-card"
        :class="{'spot-card-show': true}"
        :style="{'--item-index': index}"
        @click="goToDetail(item)"
      >
        <image class="spot-image" :src="item.ImgUrl || item.Img || item.ImageUrl" mode="aspectFill"></image>
        <view class="spot-info">
          <view class="spot-name">{{ item.Name }}</view>
          <view class="spot-sort" v-if="item.Sort">
            <text class="sort-text">热度 {{ item.Sort }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态展示 -->
    <view class="empty-state" v-if="!isLoading && scenicSpotList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
      <text class="empty-text">暂无景区信息</text>
    </view>
    
    <HzSafeArea></HzSafeArea>
  </view>
</template>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #F5F7FA;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.spot-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.spot-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
  transform: translateY(50rpx);
  opacity: 0;
  transition: all 0.3s ease;
  
  &.spot-card-show {
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: calc(0.1s * var(--item-index, 0));
  }
  
  &:active {
    transform: scale(0.98);
  }
  
  .spot-image {
    width: 100%;
    height: 320rpx;
    display: block;
  }
  
  .spot-info {
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .spot-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .spot-sort {
      background: rgba(255, 107, 49, 0.1);
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      
      .sort-text {
        font-size: 24rpx;
        color: #FF6B31;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 骨架屏样式 */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.skeleton-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .skeleton-image {
    width: 100%;
    height: 320rpx;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 400% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  .skeleton-info {
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .skeleton-name {
      width: 200rpx;
      height: 32rpx;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 400% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 4rpx;
    }
    
    .skeleton-sort {
      width: 100rpx;
      height: 32rpx;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 400% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 20rpx;
    }
  }
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>